<template>
  <div class="addProduct">
    <div class="form-box">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="商品名称" prop="name" required>
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item
          label="上传图片"
          ref="uploadElement"
          prop="productImage"
          required
        >
          <!-- <el-input v-model="ruleForm.productImage" v-if="false"></el-input> -->
          <el-upload
            ref="upload"
            action="http://localhost:3000/addProduct"
            list-type="picture-card"
            :auto-upload="false"
            :data="ruleForm"
            :on-change="handleChange"
            :before-upload="beforeUpload"
            :with-credentials="true"
          >
            <i slot="default" class="el-icon-plus"></i>
            <div slot="ruleForm" slot-scope="{ ruleForm }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="ruleForm.url"
                alt=""
              />
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
        <el-form-item label="商品单价" prop="productPrice" required>
          <el-input v-model="ruleForm.productPrice" type="number"></el-input>
        </el-form-item>
        <el-form-item label="库存数量" prop="num" required>
          <el-input v-model="ruleForm.num" type="number"></el-input>
        </el-form-item>
        <el-form-item label="商品类型" prop="type">
          <el-checkbox-group v-model="ruleForm.type">
            <el-checkbox label="数码" name="type"></el-checkbox>
            <el-checkbox label="家装" name="type"></el-checkbox>
            <el-checkbox label="食品" name="type"></el-checkbox>
            <el-checkbox label="男装" name="type"></el-checkbox>
            <el-checkbox label="女装" name="type"></el-checkbox>
            <el-checkbox label="内衣" name="type"></el-checkbox>
            <el-checkbox label="医药" name="type"></el-checkbox>
            <el-checkbox label="鞋靴" name="type"></el-checkbox>
            <el-checkbox label="电器" name="type"></el-checkbox>
            <el-checkbox label="百货" name="type"></el-checkbox>
            <el-checkbox label="生鲜" name="type"></el-checkbox>
            <el-checkbox label="洗护" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="商品状态" prop="productStatus">
          <el-select
            v-model="ruleForm.productStatus"
            placeholder="请选择商品分类"
          >
            <el-option label="上架" value="上架"></el-option>
            <el-option label="暂未上架" value="暂未上架"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品描述" prop="productdesc">
          <el-input type="textarea" v-model="ruleForm.productdesc"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >添加商品</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "addProduct",
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      ruleForm: {
        name: "",
        productImage: "",
        productPrice: 0,
        type: [],
        productStatus: "",
        productdesc: "",
        num: 0,
      },
      rules: {
        name: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
          {
            min: 1,
            max: 20,
            message: "长度在 1 到 20 个字符",
            trigger: "blur",
          },
        ],
        productImage: [
          { required: true, message: "请选择图片", trigger: "blur" },
        ],
        productPrice: [
          { required: true, message: "请输入商品价格", trigger: "blur" },
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个商品类型",
            trigger: "change",
          },
        ],
        productStatus: [
          { required: true, message: "请选择商品状态", trigger: "change" },
        ],
        productDesc: [
          { required: true, message: "请填写商品简介", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    handleChange(file) {
      console.log(file);
      if (file.response) {
        if (file.response.status == 406) {
          this.$message({
            message: file.response.msg,
            type: "warning",
          });
        }
        if (file.response.status == 405) {
          this.$message({
            message: file.response.msg,
            type: "success",
          });
          this.$refs.ruleForm.resetFields();
          this.$refs.upload.clearFiles();
        }
      }
      // 转换一个图片url
      this.ruleForm.productImage = URL.createObjectURL(file.raw);
    },
    beforeUpload(file) {
      // 判断文件类型
      const isImage = file.type.includes("image");
      if (!isImage) {
        this.$message.error("上传文件类型必须是图片");
      }

      // 判断图片大小 b kb mb
      const isL5M = file.size / 1024 / 1024 < 5;
      if (!isL5M) {
        this.$message.error("上传图片大小不能超过5M");
      }

      return isImage && isL5M;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert("submit!");
          console.log("submit");
          console.log(this.$refs.upload);
          this.$refs.upload.submit();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.$refs.upload.clearFiles();
    },
  },
  created() {},
};
</script>
<style lang="less" scoped>
.addProduct {
  background: white;
  .form-box {
    padding: 50px 0;
    width: 50%;
  }
}
</style>
